<template>
  <view class="my-container safe-area">
    <!-- 顶部用户信息卡片 -->
    <view class="user-card" @click="navigateTo('edit-profile')">
      <view class="user-avatar">
        <u-avatar 
          :src="userInfo.avatar  || '/static/default-avatar.png'"   
          size="80"
          mode="aspectFill"
        ></u-avatar>
        <u-badge 
          v-if="userInfo.unread"   
          :count="userInfo.unread"   
          offset="[-10, -10]"
        ></u-badge>
      </view>
      <view class="user-info">
        <text class="username">{{ userInfo.nickname  || '未设置昵称' }}</text>
        <text class="user-id">ID: {{ userInfo.id  || '--' }}</text>
        <view class="tags">
          <u-tag 
            v-if="userInfo.vip"   
            text="VIP会员" 
            size="mini" 
            type="error" 
            plain 
          />
          <u-tag 
            v-if="userInfo.certified"   
            text="已认证" 
            size="mini" 
            type="success" 
            plain 
          />
        </view>
      </view>
      <u-icon name="arrow-right" color="#999" size="20"></u-icon>
    </view>
 
    <!-- 功能列表 -->
    <view class="function-list">
		<view class="card-group">
			<u-cell icon="heart" title="择偶标准" isLink @click="navigateTo('mate-criteria')"></u-cell>
			<u-cell icon="account" title="专属媒人" isLink></u-cell>
			<u-cell icon="facebook" title="一对一服务" isLink></u-cell>
			<u-cell icon="file-text" title="建档续费" isLink></u-cell>
			<u-cell icon="question-circle" title="投诉留言" isLink></u-cell>
		</view>
    </view>
 
    <!-- 退出登录按钮 -->
    <view class="logout-btn">
      <u-button 
        type="error" 
        shape="circle" 
        @click="showLogoutConfirm"
      >
        退出登录 
      </u-button>
    </view>
	<tabBar />
	
	<u-modal @cancel="cancelModal" :show="showFeeModal" :title="feeTitle" :content="feeContent" show-cancel-button @confirm="handlePayment"></u-modal>
  </view>
</template>
 
<script>
import mediatorCard from '@/components/my/mediator-card.vue';  
import feeCard from '@/components/my/fee-card.vue';  
import { getUserInfo, getMediatorInfo } from '@/mock/user';
 
export default {
  components: { mediatorCard, feeCard },
  data() {
    return {
      userInfo: {},
      mediator: {},
      serviceFee: {
        expired: false,
        endTime: 0,
        expiringSoon: false 
      },
      archiveFee: {
        endTime: 0,
        status: 'normal' // normal/review/expired 
      },
      mateCriteria: false,
	  showFeeModal: false,
	  feeTitle: '温馨提示',
	  feeContent: '是否确认退出',
    }
  },
  onShow() {
    this.loadData();  
  },
  methods: {
    async loadData() {
      try {
        const [user, mediator] = await Promise.all([  
          getUserInfo(),
          getMediatorInfo()
        ]);
        
        this.userInfo  = user;
        this.mediator  = mediator;
        this.mateCriteria  = user.mateCriteriaSet  || false;
 
        // 初始化费用状态 
        if (user.gender  === 'male') {
          const now = Date.now();  
          const serviceEndTime = now + 30 * 86400 * 1000; // 30天后 
          
          this.serviceFee  = {
            expired: now > serviceEndTime,
            endTime: serviceEndTime,
            expiringSoon: (serviceEndTime - now) < 7 * 86400 * 1000 
          };
 
          this.archiveFee  = {
            endTime: now + 365 * 86400 * 1000, // 1年后 
            status: user.isNew  ? 'review' : 'normal'
          };
        }
      } finally {
        // this.$u.loading.hide();  
      }
    },
    async handleServiceFee() {
      const action = this.serviceFee.expired  ? 'renew' : 'cancel';
      const res = await this.$u.api[`${action}ServiceFee`]();  
      
      this.$u.toast(res.message);  
      this.loadData();  
    },
    async handleArchiveFee() {
      if (this.archiveFee.status  === 'review') return;
      
      const res = await this.$u.api.renewArchiveFee();  
      this.$u.toast(res.message);  
      this.loadData();  
    },
    showLogoutConfirm() {
		this.showFeeModal = true
		uni.removeStorageSync('token');
		uni.removeStorageSync('userInfo');
      // this.$u.modal({  
      //   title: '确认退出',
      //   content: '退出后将无法接收新消息',
      //   showCancel: true,
      //   async success(res) {
      //     if (res.confirm)  {
      //       await this.$u.api.logout();  
      //       uni.reLaunch({  url: '/pages/login/login' });
      //     }
      //   }
      // });
    },
	cancelModal(){
		this.showFeeModal = false
	},
	handlePayment(){
		uni.reLaunch({  url: '/pages/login/login' });
	},
    navigateTo(path) {
      uni.navigateTo({  url: `/pages/my/${path}` });
    }
  }
}
</script>
 
<style lang="scss" scoped>
.my-container {
  padding: 20rpx 24rpx 120rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
  
  .user-card {
    display: flex;
    align-items: center;
    padding: 32rpx;
    margin-bottom: 24rpx;
    background: #ffffff;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    }
 
    .user-avatar {
      position: relative;
      margin-right: 28rpx;
      
      ::v-deep .u-avatar {
        border: 4rpx solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      }
    }
 
    .user-info {
      flex: 1;
      
      .username {
        display: block;
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
        line-height: 1.4;
      }
 
      .user-id {
        font-size: 26rpx;
        color: #909399;
      }
 
      .tags {
        display: flex;
        margin-top: 16rpx;
        
        .u-tag {
          margin-right: 12rpx;
        }
      }
    }
    
    .u-icon {
      margin-left: 16rpx;
    }
  }
 
  .function-list {
    margin-bottom: 24rpx;
    // background: #ffffff;
    border-radius: 24rpx;
    overflow: hidden;
    
    .u-cell-group {
		background: #ffffff;
		 border-radius: 24rpx;
      ::v-deep .u-cell {
        padding: 32rpx;
        
        &::after {
          left: 32rpx;
          right: 32rpx;
        }
      }
    }
 
    .status {
      font-size: 28rpx;
      color: #909399;
      
      &.active {
        color: #19be6b;
      }
    }
 
    .mediator-info {
      font-size: 28rpx;
      color: #606266;
      
      .phone {
        margin-left: 16rpx;
        color: #2979ff;
      }
    }
  }
 
  .card-group {
    margin: 24rpx 0;
    background-color: #fff;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  }
 
  .logout-btn {
    margin: 48rpx 0 0;
  }
}
</style>